import { FC, useEffect, useRef, useState } from "react";
import styles from "./index.module.less";
// import Body from "./components/Body";
import { BigScreenContext, CurrentKey } from "./context/BigScreenContext";
import { IframePostMessageApi } from "@/utils/postMessage/IframePostMessageApi";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Body from "@/components/Body";
const BigScreen: FC = () => {
  const [clientWidth, setClientWidth] = useState(0);
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const postMessageApi = new IframePostMessageApi();

  // 判断是刷新页面还是从其他页面跳转进来
  const [currentKey, setCurrentKey] = useState<CurrentKey>(() => {
    const savedTab = sessionStorage.getItem(
      "bigScreenCurrentTab"
    ) as CurrentKey;
    return savedTab || "intelligentAuestionAnsweringNumber";
  });

  const recalc = function () {
    const { clientWidth } = document.documentElement;
    document.documentElement.style.overflow = "hidden";
    if (!clientWidth) return;
    setClientWidth(clientWidth);
    if (clientWidth >= 1920) {
      document.documentElement.style.fontSize = "20px"; // 1rem  = 100px
    } else {
      document.documentElement.style.fontSize =
        20 * (clientWidth / 1920) + "px";
    }
  };

  // 当currentKey变化时，保存到se
  useEffect(() => {
    if (currentKey) {
      // postMessageApi.sendViewBackMessage(
      //   iframeRef?.current?.contentWindow,
      //   true
      // );
      // if (currentKey === "main" || currentKey === "stabilityAssessment") {
      //   postMessageApi.sendAllAlarmMessage(
      //     iframeRef?.current?.contentWindow,
      //     []
      //   );
      // }
      sessionStorage.setItem("bigScreenCurrentTab", currentKey);
    }
  }, [currentKey]);

  useEffect(() => {
    recalc();
    window.addEventListener("resize", recalc);

    return () => {
      window.removeEventListener("resize", recalc);
    };
  }, []);

  return (
    <>
      <BigScreenContext.Provider
        value={{
          currentKey,
          setCurrentKey,
          clientWidth,
          iframeRef,
          postMessageApi,
        }}
      >
        <div className={styles["bg"]}>
          {/* https://obp-test.supcon5t.com/liusuan-web/inner#/inner */}
          {/* <iframe ref={iframeRef} src={`${window.origin}/liusuan-web/inner#/inner`} style={{ width: "100%", height: "100%" }} frameborder="0" ></iframe> */}
          <Header></Header>
          <Body></Body>
          <Footer />
          {/* <Button onClick={sendMessage}>发送消息</Button> */}
        </div>
      </BigScreenContext.Provider>
    </>
  );
};

export default BigScreen;
